<template>
    <div class="tanchu">
        <div class="wode">     
            <!-- 频道 -->           
            <van-cell class="userinfo">
                <p slot="title" class="title">我的频道</p>
                <van-button type="primary" slot="default" class="bianji" @click="shows">{{show?'编辑':'完成'}}</van-button>
            </van-cell>
            <!-- 宫格 -->
                <van-grid :gutter='10'>
                    <van-grid-item class="list" v-for="items in this.item" :key="items.id">
                        <p  class="text">{{items.name}}</p>
                        <i class="iconfont icon-chushaixuanxiang"  v-show="show" @click="del(items)"></i>
                    </van-grid-item>                                            
                </van-grid>
         </div>
         <div class="tuijian">
               <van-cell class="userinfo">
                    <p slot="title" class="title">频道推荐</p>                  
               </van-cell>
                 <!-- 宫格 -->
                <van-grid :gutter='10'>
                    <van-grid-item class="lists" v-for="item in iout" :key="item.id">
                        <i class="iconfont icon-jia" @click="add(item)"></i>
                        <p class="texts">{{item.name}}</p>                      
                    </van-grid-item>                             
                </van-grid>
         </div>
    </div>
</template>
<script>
import { getAllChannels,addUserChannel,deleteUserChannel } from '@/api/user.js'
export default {
  data:function(){
    return {
      show:false,
      list:[]
    }
  },
  props:(['item']),
  computed:{
    iout() {
      //   去查找已经有的 让全部列表吧这几个给筛选出来
      return this.list.filter(item => {
        // 查找到里面有的
        return this.item.findIndex(items => {
          return items.id === item.id
        }) === -1 
      })       
    }  
  },
  methods:{
    shows() {
      this.show = !this.show
    },
    async del(items){          
      try {
        if (this.$store.state.token) {
          // 已登录，将数据存储到线上
          this.item.splice(items,1)
          const ss = await deleteUserChannel(items.id)
          console.log(ss)              
        } else {
          // 未登录，将数据存储到本地              
          localStorage.setItem('channles',JSON.stringify(this.item))
        }
      } catch (err) {
        console.log(err)
        this.$toast('删除频道失败，请稍后重试')
      }         
    },
    async add(item){
      try {
        this.item.push(item)                 
        if (this.$store.state.token) {
          // 已登录，数据存储到线上
          await addUserChannel([{
            id: item.id, // 频道 id
            seq: this.item.length // 频道的 序号
          }])
        } else {
          // 未登录，数据存储到本地
          localStorage.setItem('channels',JSON.stringify(this.item))
        }
      } catch (err) {
        console.log(err)
        this.$toast('添加频道失败')
      }
    },
    // 获取所以的推荐列表
    async getlistt(){
      const gerpindao = await getAllChannels()
      this.list = gerpindao.data.data.channels
    }
  },
  created(){
    this.getlistt()
  }
}
</script>
<style lang="less">
// 弹出层的宽度
.van-popup--right{
   width: 100%;
}
.tanchu{
    // 用户自己的频道
    [class*=van-hairline]::after{
        border: 0px;
    }
    .van-cell::after{
        border-bottom: 0px;
    }
    .wode{
        text-align: left;
        padding: 100px 0px;
    .title{
        font-size: 32px;
        color: #333333;
    }
    .bianji{
       width: 113px;
       height: 59px;
       padding: 0px;
    }
    .list{
        .van-grid-item__icon-wrapper{
            height: 15px;
            line-height: 15px;
        }
        .van-grid-item__content{
            background-color: #f4f5f6;
        }   
        .text{
        font-size: 28px;
        font-weight: normal;
        font-stretch: normal;    
        letter-spacing: 1px;
        color: #222222;
        }
        .icon-chushaixuanxiang{
            color:red;
            font-size: 15px;
            position: absolute;
            right: 0px;
            top: 0px;
        }
    }
    }
    // 推荐列表
    .tuijian{
        text-align: left;
        .icon-jia{
            color: rosybrown;
        }
        .lists{
            width: 160px;
            height: 86px;         
            border-radius: 6px;
            .van-grid-item__icon-wrapper{
                height: 20px;
                line-height: 20px;
            }
            .van-grid-item__content{
                flex-direction: row;
                background: #f4f5f6;
            }
            .texts{
                font-size: 28px;
                height: 28px;
                line-height: 28px;
                color: #222222;
            }
            .icon-jia{
                font-size: 20px;
                padding-top: 3px;
                color: seagreen;
            }
        }
       
    }
}
</style>
